<template>
        <headers></headers>
    <div style="display: grid; place-items: center; height: 100vh;">
       
        <div class="card" style="width: 50%;padding: 40px 40px">
            <el-form :model="datatable.form" label-width="100px" label-position="left">
                <el-form-item label="用户头像">
                  <!-- :action="$baseUrl+'/files/upload'" -->
                <el-upload action="http://121.41.171.56:2003/work/uploadPic" :on-success="handleImguploadSuccess" list-type="picture" class="avatar-uploader"
                :show-file-list="false">
                    <img v-if="datatable.form.userAvatar" :src="datatable.form.userAvatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
                </el-upload>
            </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="datatable.form.username" autocomplete="off" disabled/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="datatable.form.userPwd" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="datatable.form.userEmail" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" >
            <el-radio-group v-model="datatable.form.userSex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        
          <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
        </div>
    </div>
</template>
<script setup>
import {reactive,onMounted} from "vue"
import request from "@/utils/request"
import {useUserInfoStore} from "@/stores/userInfo"
import { ElMessage } from "element-plus"
import headers from "../components/Headers.vue";

  const userInfoStore=useUserInfoStore()
  const user=userInfoStore.user

const datatable=reactive({
    form:{}
})


onMounted(()=>{
    datatable.form=user
})


const handleImguploadSuccess=(res)=>{
  console.log(res.data.picLink)
  datatable.form.userAvatar=res.data.picLink
}

const save=()=>{
    if(datatable.form.userPwd!==''&&datatable.form.userPwd.length<5){
        ElMessage.error("密码不能少于5位")
        return
    }
    console.log(datatable.form)
    request.post("user/addoupStu",datatable.form).then(res=>{
        if(res.code==200){
            ElMessage.success("操作成功")
        }else{
            ElMessage.error(res.message)
        }
    })
}


</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  text-align: center;
}
.avatar{
    width:140px;
    height:100p;
    display: block;
}
</style>
